<template>
  <div class="execution">
    <basic-container>
      <el-card shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="handleAdd()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
          <el-table-column
            label="原始Id"
            align="center"
            prop="originalId"
          ></el-table-column>
          <el-table-column
            label="小程序APPID"
            align="center"
            prop="appletAppid"
          ></el-table-column>
          <el-table-column
            label="appletAppsecret"
            align="center"
            prop="appletAppsecret"
          ></el-table-column>
          <el-table-column label="小程序URL" align="center" prop="appletsUrl">
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
          ></el-table-column>
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
          ></el-table-column>

          <el-table-column
            label="编辑时间"
            align="center"
            prop="editTime"
          ></el-table-column>
          <el-table-column
            label="编辑人"
            align="center"
            prop="editId"
          ></el-table-column>
          <el-table-column
            label="店铺ID"
            align="center"
            prop="storeId"
          ></el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                @click="handleUpdata(row)"
                type="text"
                plain
                >编辑</el-button
              >

              <el-button
                size="mini"
                @click="handleDelete(row)"
                type="text"
                plain
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog
        :title="titleDialog"
        :visible.sync="dialogVisible"
        :before-close="close"
        width="40%"
      >
        <el-form
          :model="appAddForm"
          :rules="rules"
          ref="appAddForm"
          label-width="150px"
        >
          <el-form-item
            label="选择所属店铺："
            prop="storeId"
            v-if="titleDialog === '添加'"
          >
            <el-select
              v-model="appAddForm.platId"
              size="small"
              clearable
              placeholder="平台"
              style="width: 150px"
              @change="getPlatStroe(appAddForm.platId)"
            >
              <el-option
                v-for="item in platformAllOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="appAddForm.storeId"
              size="small"
              clearable
              placeholder="店铺"
              style="width: 150px"
            >
              <el-option
                v-for="item in platStoreOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="小程序APPID：" prop="appletAppid">
            <el-input v-model="appAddForm.appletAppid"></el-input>
          </el-form-item>
          <el-form-item label="appletAppsecret:" prop="appletAppsecret">
            <el-input v-model="appAddForm.appletAppsecret"></el-input>
          </el-form-item>
          <el-form-item label="小程序URL:" prop="appletsUrl">
            <el-input v-model="appAddForm.appletsUrl"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('appAddForm')"
              >提交</el-button
            >
            <el-button type="info" @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>
    
<script>
import "@/styles/index.scss";
import {
  allocationPage,
  addAllocation,
  updateAllocation,
  deleteAllocation,
} from "@/api/config/index";
import { platformAll, getStoreList } from "@/api/rms/rmsstore";

const defaultAppAddForm = {
  platId: null,
  storeId: null,
  appletAppid: null,
  appletAppsecret: null,
  appletsUrl: null,
};

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
      },
      list: [],
      total: 0,
      titleDialog: "添加",
      dialogVisible: false,
      platformAllOption: [],
      platStoreOption: [],
      appAddForm: Object.assign({}, defaultAppAddForm),
      rules: {
        storeId: [
          { required: true, message: "请选择所属店铺", trigger: "change" },
        ],
        appletAppid: [
          { required: true, message: "请填写小程序APPID", trigger: "change" },
        ],
        appletAppsecret: [
          {
            required: true,
            message: "请填写appletAppsecret",
            trigger: "change",
          },
        ],
        appletsUrl: [
          { required: true, message: "请填写小程序URL", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getPlatformAll() {
      platformAll().then((res) => {
        this.platformAllOption = res.data.data;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      allocationPage(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleAdd() {
      this.titleDialog = "添加";
      this.dialogVisible = true;
      this.getPlatformAll();
    },
    handleUpdata(row) {
      this.titleDialog = "编辑";
      this.dialogVisible = true;
      this.appAddForm = Object.assign({}, row);
      this.getPlatformAll();
    },
    getPlatStroe(platId) {
      getStoreList({ platformId: platId }).then((res) => {
        this.platStoreOption = res.data.data;
      });
    },
    close() {
      this.dialogVisible = false;
      this.appAddForm = Object.assign({}, defaultAppAddForm);
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.titleDialog === "编辑") {
            this.appAddForm.id = this.appAddForm.storeId;
            updateAllocation(this.appAddForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.close();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          } else {
            addAllocation(this.appAddForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.close();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          }
        }
      });
    },
    handleDelete(row) {
      let that = this;
      that
        .$confirm("是否确认删除ID为" + row.id, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          deleteAllocation({ id: row.id }).then((res) => {
            if (res.data.code === 200) {
              that.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              that.getList();
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning",
                duration: 1000,
              });
            }
          });
        });
    },
  },
};
</script>
    
    <style>
</style>